<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>如何使用vuepress玩转blog | chenyanan の blog</title>
    <meta name="description" content="学习最好的时间就是现在">
    <link rel="icon" href="/icon/ico-pig.png">
    
    <link rel="preload" href="/assets/css/0.styles.259bd069.css" as="style"><link rel="preload" href="/assets/js/app.18ed8616.js" as="script"><link rel="preload" href="/assets/js/2.b2b5ec56.js" as="script"><link rel="preload" href="/assets/js/10.437bc17b.js" as="script"><link rel="prefetch" href="/assets/js/11.1ad96465.js"><link rel="prefetch" href="/assets/js/12.6acf0bac.js"><link rel="prefetch" href="/assets/js/13.656d27c0.js"><link rel="prefetch" href="/assets/js/3.3db726ef.js"><link rel="prefetch" href="/assets/js/4.b6e8eeaa.js"><link rel="prefetch" href="/assets/js/5.a09627c5.js"><link rel="prefetch" href="/assets/js/6.1b65e7fe.js"><link rel="prefetch" href="/assets/js/7.bc8e85db.js"><link rel="prefetch" href="/assets/js/8.eddc2e23.js"><link rel="prefetch" href="/assets/js/9.e25efe9e.js">
    <link rel="stylesheet" href="/assets/css/0.styles.259bd069.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">chenyanan の blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/dev/" class="nav-link">后端</a></div><div class="nav-item"><a href="/front/" class="nav-link router-link-active">前端</a></div><div class="nav-item"><a href="/mydocslist/" class="nav-link">我的工程</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="GitHub" class="dropdown-title"><span class="title">GitHub</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/ching7" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub地址
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/dev/" class="nav-link">后端</a></div><div class="nav-item"><a href="/front/" class="nav-link router-link-active">前端</a></div><div class="nav-item"><a href="/mydocslist/" class="nav-link">我的工程</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="GitHub" class="dropdown-title"><span class="title">GitHub</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/ching7" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub地址
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>玩转vuepress</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front/markdown/manual.html" class="active sidebar-link">如何使用vuepress玩转blog</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_1-搭建环境" class="sidebar-link">1 搭建环境</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_1-1-全局安装vuepress" class="sidebar-link">1.1 全局安装Vuepress</a></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_1-2-项目初始化" class="sidebar-link">1.2 项目初始化</a></li></ul></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_2-启动项目" class="sidebar-link">2 启动项目</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_2-1-项目结构解析" class="sidebar-link">2.1 项目结构解析</a></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_2-2-启动vuepress" class="sidebar-link">2.2 启动vuepress</a></li></ul></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_3-配置vuepress" class="sidebar-link">3 配置vuepress</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_3-1-基本的项目配置" class="sidebar-link">3.1 基本的项目配置</a></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_3-2-导航栏配置" class="sidebar-link">3.2 导航栏配置</a></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_3-3-侧边栏配置" class="sidebar-link">3.3 侧边栏配置</a></li></ul></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_4-发布vuepress到github" class="sidebar-link">4 发布vuepress到github</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_4-1-配置config-js" class="sidebar-link">4.1 配置config.js</a></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_4-2-创建脚本文件" class="sidebar-link">4.2 创建脚本文件</a></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_4-3-调整package-json" class="sidebar-link">4.3 调整package.json</a></li><li class="sidebar-sub-header"><a href="/front/markdown/manual.html#_4-4-部署vuepress到github" class="sidebar-link">4.4 部署vuepress到github</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="如何使用vuepress玩转blog"><a href="#如何使用vuepress玩转blog" aria-hidden="true" class="header-anchor">#</a> 如何使用vuepress玩转blog</h1> <p>环境：<code>node.js</code>  编码工具：<code>vscode</code> <a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">vuepress官网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="_1-搭建环境"><a href="#_1-搭建环境" aria-hidden="true" class="header-anchor">#</a> 1 搭建环境</h2> <h3 id="_1-1-全局安装vuepress"><a href="#_1-1-全局安装vuepress" aria-hidden="true" class="header-anchor">#</a> 1.1 全局安装Vuepress</h3> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>yarn global add vuepress <span class="token comment"># 或者：npm install -g vuepress</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_1-2-项目初始化"><a href="#_1-2-项目初始化" aria-hidden="true" class="header-anchor">#</a> 1.2 项目初始化</h3> <ul><li><p>新建blog项目文件夹（注意该目录为blog项目的主文件夹）</p> <p>可以使用命令新建文件夹，也可以手工创建</p> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>mkdir project
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>进入到<code>project</code>文件夹中，使用命令行初始化项目:</p> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>yarn init -y <span class="token comment"># 或者 npm init -y</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>将会创建一个<code>package.json</code>文件，长这样子：</p></li></ul> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;project&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1.0.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;keywords&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;author&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ISC&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul><li>在<code>project</code>根目录下新建<code>docs</code>文件夹</li></ul> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>mkdir docs
<span class="token comment"># 这个会作为项目文档的根目录来使用</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>在<code>docs</code>文件夹创建<code>.vuepress</code>文件夹</li></ul> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>mkdir .vuepress
<span class="token comment"># 所有vuepress的菜单配置文件、自动生成文件、静态资源都在本目录下</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>在<code>.vuepress</code>下面创建<code>config.js</code>文件</li></ul> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>touch config.js
<span class="token comment"># config.js是VuePress必要的配置文件，它导出一个javascript对象。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>先简单配置<code>config.js</code></p> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>在<code>.vuepress</code>下面创建<code>public</code>文件夹</li></ul> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code>mkdir public
<span class="token comment"># 这个文件夹是用来放置静态资源的，打包出来之后会放在.vuepress/dist/的根目录。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>创建首页</li></ul> <p>在<code>docs</code>文件夹下面创建<code>README.MD</code>文件，用来生成首页：</p> <p>默认的主题提供了一个首页，像下面一样设置<code>home:true</code>即可，可以把下面的设置放入<code>README.md</code>中，待会儿你将会看到跟<code>VuePress</code>一样的主页</p> <div class="language-properties line-numbers-mode"><pre class="language-properties"><code>---
<span class="token attr-name">home</span><span class="token punctuation">:</span> <span class="token attr-value">true</span>
<span class="token attr-name">heroImage</span><span class="token punctuation">:</span> <span class="token attr-value">/image/logo.jpg</span>
<span class="token attr-name">actionText</span><span class="token punctuation">:</span> <span class="token attr-value">快速上手 →</span>
<span class="token attr-name">actionLink</span><span class="token punctuation">:</span> <span class="token attr-value">/zh/guide/</span>
<span class="token attr-name">features</span><span class="token punctuation">:</span>
<span class="token attr-name">-</span> <span class="token attr-value">title: 简洁至上</span>
<span class="token attr-name">  details</span><span class="token punctuation">:</span> <span class="token attr-value">以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。</span>
<span class="token attr-name">-</span> <span class="token attr-value">title: Vue驱动</span>
<span class="token attr-name">  details</span><span class="token punctuation">:</span> <span class="token attr-value">享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。</span>
<span class="token attr-name">-</span> <span class="token attr-value">title: 高性能</span>
<span class="token attr-name">  details</span><span class="token punctuation">:</span> <span class="token attr-value">VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。</span>
<span class="token attr-name">footer</span><span class="token punctuation">:</span> <span class="token attr-value">MIT Licensed | Copyright © 2018-present Evan You</span>
---
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>需要在<code>docs/.vuepress/public</code>下放一张静态图片作为首页logo</p> <h2 id="_2-启动项目"><a href="#_2-启动项目" aria-hidden="true" class="header-anchor">#</a> 2 启动项目</h2> <h3 id="_2-1-项目结构解析"><a href="#_2-1-项目结构解析" aria-hidden="true" class="header-anchor">#</a> 2.1 项目结构解析</h3> <div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code>project
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>在<code>package.json</code>里添加两个启动命令</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;docs:dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-2-启动vuepress"><a href="#_2-2-启动vuepress" aria-hidden="true" class="header-anchor">#</a> 2.2 启动vuepress</h3> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code><span class="token comment"># 构建：build生成静态的HTML文件,默认会在 .vuepress/dist 文件夹下</span>
yarn docs:build <span class="token comment"># 或者：npm run docs:build</span>

<span class="token comment"># 启动：默认是 localhost:8080 端口</span>
yarn docs:dev <span class="token comment"># 或者：npm run docs:dev</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="_3-配置vuepress"><a href="#_3-配置vuepress" aria-hidden="true" class="header-anchor">#</a> 3 配置vuepress</h2> <p><code>config.js</code>配置</p> <h3 id="_3-1-基本的项目配置"><a href="#_3-1-基本的项目配置" aria-hidden="true" class="header-anchor">#</a> 3.1 基本的项目配置</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'chenyanan の blog'</span><span class="token punctuation">,</span>
  description<span class="token punctuation">:</span> <span class="token string">'学习最好的时间就是现在'</span><span class="token punctuation">,</span>
  <span class="token comment">// 注入到当前页面的 HTML &lt;head&gt; 中的标签</span>
  head<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span class="token punctuation">:</span> <span class="token string">'icon'</span><span class="token punctuation">,</span> href<span class="token punctuation">:</span> <span class="token string">'/ico-pig.png'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 增加一个自定义的 favicon(网页标签的图标)</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">//base: '/vuepress-blog/', // 这是部署到github相关的配置 下面会讲</span>
  markdown<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    lineNumbers<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// 代码块显示行号</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  themeConfig<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    sidebarDepth<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// e'b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。</span>
    lastUpdated<span class="token punctuation">:</span> <span class="token string">'Last Updated'</span><span class="token punctuation">,</span> <span class="token comment">// 文档更新时间：每个文件git最后提交的时间</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="_3-2-导航栏配置"><a href="#_3-2-导航栏配置" aria-hidden="true" class="header-anchor">#</a> 3.2 导航栏配置</h3> <p><img src="/image/bar-example.jpg" alt=""></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>themeConfig<span class="token punctuation">:</span> <span class="token punctuation">{</span>
	  nav<span class="token punctuation">:</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'后端'</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span> <span class="token string">'/dev/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 内部链接 以docs为根目录</span>
      <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'前端'</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span> <span class="token string">'/front/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
      <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'微服务'</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span> <span class="token string">'/videoDemo.html'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
      <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'架构'</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span> <span class="token string">'#'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
      <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'读书'</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span> <span class="token string">'#'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
      <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'音乐'</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span> <span class="token string">'#'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
      <span class="token comment">// 下拉列表</span>
      <span class="token punctuation">{</span>
        text<span class="token punctuation">:</span> <span class="token string">'GitHub'</span><span class="token punctuation">,</span>
        items<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'GitHub地址'</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span> <span class="token string">'https://github.com/ching7'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">// 外部链接</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>        
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="_3-3-侧边栏配置"><a href="#_3-3-侧边栏配置" aria-hidden="true" class="header-anchor">#</a> 3.3 侧边栏配置</h3> <p><img src="/image/bar-example2.jpg" alt=""></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      sidebar<span class="token punctuation">:</span><span class="token punctuation">{</span>
        <span class="token comment">// docs文件夹下面的dev文件夹 文档中md文件 书写的位置(命名随意)</span>
        <span class="token string">'/dev/'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token string">'/dev/'</span><span class="token punctuation">,</span> <span class="token comment">// dev文件夹的README.md 不是下拉框形式</span>
            <span class="token punctuation">{</span>
              title<span class="token punctuation">:</span> <span class="token string">'侧边栏下拉框的标题1'</span><span class="token punctuation">,</span>
              children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                <span class="token string">'/dev/java/test'</span><span class="token punctuation">,</span> <span class="token comment">// 以docs为根目录来查找文件 </span>
                <span class="token comment">// 上面地址查找的是：docs&gt;dev&gt;test.md 文件</span>
                <span class="token comment">// 自动加.md 每个子选项的标题 是该md文件中的第一个h1/h2/h3标题</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token comment">// docs文件夹下面的front文件夹 这是第二组侧边栏 跟第一组侧边栏没关系</span>
          <span class="token string">'/front/'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token string">'/front/'</span><span class="token punctuation">,</span> 
            <span class="token punctuation">{</span>
              title<span class="token punctuation">:</span> <span class="token string">'第二组侧边栏下拉框的标题1'</span><span class="token punctuation">,</span>
              children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                <span class="token string">'/front/js/test'</span> 
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h2 id="_4-发布vuepress到github"><a href="#_4-发布vuepress到github" aria-hidden="true" class="header-anchor">#</a> 4 发布vuepress到github</h2> <h3 id="_4-1-配置config-js"><a href="#_4-1-配置config-js" aria-hidden="true" class="header-anchor">#</a> 4.1 配置<code>config.js</code></h3> <p>在<code>docs/.vuepress/config.js</code>设置正确的base</p> <p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/</code>，则可以省略这一步，因为 base 默认即是 <code>&quot;/&quot;</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://github.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 base 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>module.exports = {
  base: '/test/', // 比如你的仓库是test
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_4-2-创建脚本文件"><a href="#_4-2-创建脚本文件" aria-hidden="true" class="header-anchor">#</a> 4.2 创建脚本文件</h3> <p>在<code>project</code>的根目录下创建<code>delpoy.sh</code>脚本</p> <div class="language-cmake line-numbers-mode"><pre class="language-cmake"><code><span class="token comment">#!/usr/bin/env sh</span>

<span class="token comment"># 确保脚本抛出遇到的错误</span>
set -e

<span class="token comment"># 生成静态文件</span>
npm run docs:build

<span class="token comment"># 进入生成的文件夹</span>
cd docs/.vuepress/dist

<span class="token comment"># 如果是发布到自定义域名</span>
<span class="token comment"># echo 'www.example.com' &gt; CNAME</span>

git init
git add -A
git commit -m 'deploy'

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io  USERNAME=你的用户名 </span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;USERNAME&gt;.github.io.git master</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;  REPO=github上的项目</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;REPO&gt;.git master:gh-pages</span>

cd -
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="_4-3-调整package-json"><a href="#_4-3-调整package-json" aria-hidden="true" class="header-anchor">#</a> 4.3 调整<code>package.json</code></h3> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
	<span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    	<span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 本地运行项目 npm run dev</span>
    	<span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 构建项目 nom run build</span>
    	<span class="token property">&quot;d&quot;</span><span class="token operator">:</span> <span class="token string">&quot;bash deploy.sh&quot;</span> <span class="token comment">// 部署项目 npm run d</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="_4-4-部署vuepress到github"><a href="#_4-4-部署vuepress到github" aria-hidden="true" class="header-anchor">#</a> 4.4 部署vuepress到github</h3> <p>然后你每次可以运行下面的命令行，来把最新更改推到<code>github</code>上：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>    npm run d
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>参考资料:</p> <p><a href="https://segmentfault.com/a/1190000016333850" target="_blank" rel="noopener noreferrer">VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><a href="https://www.jianshu.com/p/6e8c608f24c8" target="_blank" rel="noopener noreferrer">VuePress + GitHub Pages 搭建个人博客<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><a href="https://www.jianshu.com/p/e68fba58f75c" target="_blank" rel="noopener noreferrer">利用 GitHub Pages 快速搭建个人博客<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></blockquote></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/21/2019, 2:56:24 PM</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.18ed8616.js" defer></script><script src="/assets/js/2.b2b5ec56.js" defer></script><script src="/assets/js/10.437bc17b.js" defer></script>
  </body>
</html>
